<template>
    <div style="text-align: -webkit-center;">
        <div ref="printTable">
            <table cellSpacing=0 cellPadding=0 width=450 align=center border=0>
            <tbody>
                <tr class=bgwhitecenter height=10>
                    <td colSpan=3 noWrap>&nbsp; </td>
                </tr>
                <tr class=bgwhitecenter height=20>
                    <td vAlign=bottom width="20%" noWrap align=left><IMG src="/img/logo.png"
                            width=150></IMG> <span style="VERTICAL-ALIGN: top">上海东洋炭素工业有限公司</span></td>
                    <td width="60%" colSpan=2 noWrap>&nbsp;</td>
                    <td vAlign=bottom width="20%" noWrap align=center>&nbsp;</td>
                </tr>
                <tr class=bgwhitecenter height=40>
                    <td colSpan=4 noWrap align=center><span
                            style="font-size: 24px; text-decoration: underline;  font-weight: bold;padding-bottom: 2px; letter-spacing: 28px;margin-left:30px">暂支单</span>
                    </td>
                </tr>
                <tr class=bgwhitecenter>
                    <td colSpan=2 noWrap align=left>申请日期：{{ form.applyDate}}
                    </td>
                    <td colSpan=2 noWrap align=right>编号：{{ form.number }}
                    </td>
                </tr>
            </tbody>
            </table>
            <div style="height: 5px">&nbsp;</div>
            <table class=tableStyle1 cellSpacing=0 width=500 align=center border=1>
                <tbody>
                    <tr class=bgwhiteleftxin>
                        <td style="font-size: 12px" noWrap>受款人</td>
                        <td style="font-size: 12px" colSpan=3 noWrap>{{ form.receiver }} </td>
                    </tr>
                    <tr class=bgwhiteleftxin>
                        <td style="font-size: 12px" noWrap>暂支事由</td>
                        <td style="font-size: 12px" colSpan=3 noWrap>{{ form.remark }}</td>
                    </tr>
                    <tr class=bgwhiteleftxin>
                        <td style="font-size: 12px" noWrap>暂支金额</td>
                        <td style="font-size: 12px" colSpan=3 noWrap>人民币{{form.applyAmount}}￥ </td>
                    </tr>
                    <tr class=bgwhiteleftxin>
                        <td style="font-size: 12px">预计归<br>还日期</td>
                        <td style="font-size: 12px" noWrap>{{ form.expectedReturnDate }}</td>
                        <td style="font-size: 12px" noWrap>科目</td>
                        <td style="font-size: 12px" noWrap>{{ form.subjectsName }}</td>
                    </tr>
                </tbody>
            </table>
            <table cellSpacing=0 cellPadding=0 width=450 align=center border=0>
                <tbody>
                    <tr class=bgwhitecenter>
                        <td width=10 noWrap align=left>&nbsp; </td>
                        <td noWrap align=left><span class=tnt>财务主管</span> </td>
                        <td noWrap><span class=tnt>记&nbsp;&nbsp;&nbsp;&nbsp;帐</span> </td>
                        <td noWrap><span class=tnt>出&nbsp;&nbsp;&nbsp;&nbsp;纳 </span></td>
                        <td noWrap><span class=tnt>部门主管</span> </td>
                        <td noWrap><span class=tnt>申请人 </span></td>
                        <td noWrap><span class=tnt>受款人</span> <span class=tnt>（签收)</span></td>
                        <td width=100 noWrap>&nbsp; </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="button-position" style="margin-top:60px">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="print1">打印</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Api from '@/api/model/trip.js'
import print from '@/utils/print'
const form = ref({
})
const printTable = ref(null)
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
onMounted(() => {
    getInit()
})
const getInit = async () => {
    let formRes = await Api.applyCost.detail.post(props.paramsData)
    if (formRes.code == 200) {
        form.value = formRes.data
    }
}
const updateVisible = (val) => {
    emit('updatetable')
}
const print1 = () => {
    print(printTable.value)
}
</script>
<style scoped lang="less">
:deep(.el-checkbox__label) {
    font-size: 14px;
    color: #000000;
    padding-left: 5px;
}

:deep(.el-checkbox) {
    --el-checkbox-checked-input-border-color: #000000;
    --el-checkbox-checked-bg-color: #000000;
    --el-checkbox-checked-text-color: #000000;
    --el-checkbox-checked-icon-color: #000000;
    ;
    margin-right: 0px;
    margin-left: 5px;
    height: 20px;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #ffffff;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
    background-color: #ffffff;
    border-color: #000000;
}

:deep(.el-checkbox__inner) {
    border-color: #000000;
    width: 12px;
    height: 12px;
}

:deep(.el-checkbox__input.is-disabled+span.el-checkbox__label) {
    color: #000000;
    cursor: not-allowed;
}

:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
    background-color: #ffffff;
    border-color: #000000;
    cursor: not-allowed;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
    border-color: #000000;
}

.barCodeTable {
    border-left: 2px inset black;
    border-top: 2px inset black;
    border-bottom: 2px inset black;
    border-right: 2px inset black;
}

.bgwhitecenter {
    background-color: #FFFFFF;
    text-align: center;
}

.bottomTableTd {
    border-bottom: 1px inset black;
    border-color: #000000;
}

.rightTableTd {
    border-right: 2px inset black;
    border-color: #000000;
}

.tnt {
    writing-mode: tb-rl;
    text-align: left;
    font-size: 9pt
}

.printTable1 {
    border: 1 #000000 inset;
    border-width: 2 2 2 2;
    border-collapse: collapse;
    color: #000000
}

.printTdBorder {
    border: 1 #000000 solid;
    border-width: 1 1 1 1
}

.printTdNoBottomBorder {
    border: 1 #000000 solid;
    border-width: 0 1 0 0
}

.txtBoxnoborder {
    border: 1 #000000 inset;
    background-color: #FFFFFF;
    border: none;
    font-size: 14px;
    height: 15px;
    color: #000000
}
.bgwhiteleftxin {
    height: 25px;
}
.tableStyle1 {
    border-collapse: collapse;
    border: 1px solid;
    border-color: #1b5ba5;
    border-spacing: 5px;
    background-color: #f6f6f6;
}

table {
    font-family: tahoma,verdana,arial,宋体;
    text-decoration: none;
    color: #000000;
    word-break: break-all;
}

</style>
